<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" href="images/favorite.ico" />
<link rel="stylesheet" href="css/schedule_nav.css" type="text/css"
	charset="utf-8" />
<link rel='stylesheet' type='text/css'
	href='plugin/fullcalendar/theme.css' />
<link rel='stylesheet' type='text/css'
	href='plugin/fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css'
	href='plugin/fullcalendar/fullcalendar.print.css' media='print' />
<title>个人信息管理系统</title>
</head>
<style type="text/css">
body {
	background: url(images/logbg1.gif) left top;
	font-weight: 400;
	font-size: 15px;
}

#login {
	margin: 10px 0 0 5%;
}

#main {
	background-color: rgba(61, 32, 32, 0.67);
	position: relative;
	margin: 10px 5% 50px 5%;
	-moz-box-shadow: 10px 10px 22px #000000;
	-webkit-box-shadow: 10px 10px 22px #000000;
	box-shadow: 10px 10px 22px #000000;
}

#calendar {
	border: solid 8px rgba(248, 248, 248, 0.63);
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	background-color: white;
}

.nav {
	background: url("images/schedule/nav.jpg");
	height: 40px;
	font-family: "PT Serif", Helvetica Neue, Helvetica, Arial, sans-serif;
	color: white;
	line-height: 22px;
	-webkit-border-radius: 0.4em 0.4em 0 0;
	border-radius: 0.4em 0.4em 0 0;
	-webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 1px 5px;
	box-shadow: rgba(0, 0, 0, 0.6) 0 1px 5px;
	padding: 10px 35px 0px 10px;
	position: relative;
	z-index: 0;
}

.headline {
	font-size: 14px;
	text-shadow: 0 0 1px transparent;
	text-align: left;
}

.image-wrap {
	-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 1), inset 0 2px 1px
		rgba(255, 255, 255, .5), inset 0 -9px 2px rgba(0, 0, 0, .6), inset 0
		-12px 2px rgba(255, 255, 255, .3);
	-moz-box-shadow: inset 0 0 4px rgba(0, 0, 0, 1), inset 0 2px 1px
		rgba(255, 255, 255, .5), inset 0 -9px 2px rgba(0, 0, 0, .6), inset 0
		-12px 2px rgba(255, 255, 255, .3);
	box-shadow: inset 0 0 4px rgba(0, 0, 0, 1), inset 0 2px 1px
		rgba(255, 255, 255, .5), inset 0 -9px 2px rgba(0, 0, 0, .6), inset 0
		-12px 2px rgba(255, 255, 255, .3);
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
/********************************************** 鼠标悬停tip提示  ************************************************/
	#tip{
  position: absolute;
  left: 50%;
  width:300px;
  z-index: 999;
  margin-left: -127px;
  padding: 10px;
  border: 2px solid #ccc;
  opacity: .9;
  background-color: rgba(32, 22, 5, 0.97);
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
	}
	#tip ul{
		margin: 0;
		padding: 0;
	}
	#tip ul li{
		font-family:'Microsoft YaHei', 微软雅黑, 'Microsoft JhengHei', 宋体;
		font-size:15px;
		list-style: none;
		padding-left: 40px;
	}
	.clock{
		/*line-height: 60px;*/
		background: url('images/calendar.png') no-repeat;
		background-size:40px 40px;
	}
	.postmessage{
		/*line-height: 60px;
		font-size: 12px;*/
		background: url('images/message.png') no-repeat;
		background-size:40px 40px;
	}
	.message{
		/*margin-top: 5px;*/
		/*line-height: 60px;*/
		background: url('images/text.png') no-repeat;
		background-size:40px 40px;
	}
</style>
<body>
	<div id="topnav">
		<ul id="navigation">
			<li class="home"><a href="main_page.action"><span>主页</span></a></li>
			<li class="about"><a href="note/note_page.action"><span>日志管理</span></a></li>
			<li class="search"><a href=""><span>文档管理</span></a></li>
			<li class="photos"><a href=""><span>个人相册</span></a></li>
			<li class="rssfeed"><a href=""><span>阅读器</span></a></li>
			<li class="podcasts"><a href=""><span>账目理财</span></a></li>
			<li class="contact"><a href=""><span>联系管理员</span></a></li>
		</ul>
	</div>
	<div id="login">
		<div class="">
			<span class="image-wrap "
				style="position: relative; display: inline-block; background: url(avatar/majintao.png) no-repeat center center; width: 100px; height: 100px;">
			</span>
		</div>

	</div>
	<div id="main">
		<div class="nav headline">
			<strong>Calendar</strong>
		</div>
		<div id="calendar"></div>
	</div>
	<script defer type="text/javascript" charset="utf-8" src="http://julying.com/lab/weather/get/jquery.weather!
	parentid=main&zIndex=1&move=true&autoDrop=true&jquery=false&style=default&area=client"></script>
</body>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type='text/javascript' src='js/jquery-ui.min.js'></script>
<script type='text/javascript' src='plugin/fullcalendar/fullcalendar.js'></script>
<script type='text/javascript'src='plugin/artdialog/artDialog.js?skin=default'></script>
<script src="plugin/artdialog/plugins/iframeTools.source.js"></script>
<script type="text/javascript">
	$(function() {
		//top navigation  
		var d = 300;
		$('#navigation a').each(function() {
			$(this).stop().animate({
				'marginTop' : '-80px'
			}, d += 150);
		});

		$('#navigation > li').hover(function() {
			$('a', $(this)).stop().animate({
				'marginTop' : '-2px'
			}, 200);
		}, function() {
			$('a', $(this)).stop().animate({
				'marginTop' : '-80px'
			}, 200);
		});

		//fullcalendar
		$('#calendar').fullCalendar({
			theme : true,
			header : {
				left : 'prev,next today',
				center : 'title',
				right : ''
			},
							//fullcalendar本地化
							//timeFormat:{agenda: 'h:mm TT{ - h:mm TT}'}, //默认是{agenda: ‘h:mm{ - h:mm}}, 影响的是添加的具体的日程上显示的时间格式.
							monthNames : [ "一月", "二月", "三月", "四月", "五月", "六月",
									"七月", "八月", "九月", "十月", "十一月", "十二月" ],
							monthNamesShort : [ "一月", "二月", "三月", "四月", "五月",
									"六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ],
							dayNames : [ "周日", "周一", "周二", "周三", "周四", "周五",
									"周六" ],
							dayNamesShort : [ "周日", "周一", "周二", "周三", "周四",
									"周五", "周六" ],
							today : [ "今天" ],
							buttonText : {
								today : '今天',
								prev : '上一月',
								next : '下一月'
							},
							selectable : true,
							selectHelper : true,
							aspectRatio : 2.7,
							editable : false,
							viewDisplay: function(view) {  
					            var viewStart = $.fullCalendar.formatDate(view.start,"yyyy-MM-dd");
					           	var viewEnd = $.fullCalendar.formatDate(view.end,"yyyy-MM-dd");  
					            $("#calendar").fullCalendar('removeEvents');  
					            $.getJSON('schedule/listEvents_do.action',{start:viewStart,end:viewEnd},function(data) {  
					               for(var i=0;i<data.length;i++) {  
					                   var obj = new Object();  
					                   obj.id = data[i].id;  
					                   obj.title = data[i].title;                 
					                   obj.description = data[i].description;          
					           		   obj.color = data[i].color;
					           		   obj.remindTime = $.fullCalendar.parseDate(data[i].remindTime);
					           		   obj.notice = data[i].notice;
					           		   obj.description = data[i].description;
					                   obj.start = $.fullCalendar.parseDate(data[i].start);                 
					                   obj.end = $.fullCalendar.parseDate(data[i].end); 
					                   $("#calendar").fullCalendar('renderEvent',obj,true);                   
					               }  
					             }); //把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示
					           },
					           
					         //日程点击：添加日程
						      	dayClick: function(date, allDay, jsEvent, view) {
						    	     var obj =new Object(); 
						    		 art.dialog.open('scheduleform.html',{
							    	 	title: '添加日程',
							    		lock: true,
							    		width:300,
						                height:400,
						                drag:false,
							            fixed: true, //固定定位
							    		//background: '#600', // 背景色
							    		opacity: 0.6,	// 透明度
							    		// 在open()方法中，init会等待iframe加载完毕后执行
							    		init: function () {
							    			var iframe = this.iframe.contentWindow;
							    		    //var top = art.dialog.top;// 引用顶层页面window对象
							    		    var start = iframe.document.getElementById('start');		    		
							    		    start.value = $.fullCalendar.formatDate(date,"yyyy-MM-dd");		    		        
							    		 },
							    		 okVal:'提交日程',
							    		 ok: function () {
							    		 	var iframe = this.iframe.contentWindow;
							    		    if (!iframe.document.body) {
							    		        waring('iframe还没加载完毕呢');
							    		        return false;
							    		    };							    		    
							    		    var start = iframe.document.getElementById('start').value;
							    		    var end = iframe.document.getElementById('end').value;
							    		    var remindTime = iframe.document.getElementById('remindTime').value;
							    		    obj.title = iframe.document.getElementById('title').value;
							    		    obj.description = iframe.document.getElementById('description').value;
							    		    obj.start = $.fullCalendar.parseDate(start);
							    		    obj.end = $.fullCalendar.parseDate(end);		    		    		    
							    		 	obj.color = iframe.document.getElementById('color').value;
							    		    if (obj.title== '') {
							    		    	waring("标题不能为空！");
							    		        return false;
							    		     }else if(start== '') {
							    		    	 waring("开始日期不能为空");
							    		        return false;
							    		     }else if(end == '') {
							    		    	 waring("结束日期不能为空");
							    		        return false;
							    		     }else if(iframe.document.getElementById('notice').checked) {			    		 
								    		        if(remindTime == '') {
								    		        	waring("短信提醒时间不能为空");
								    		        	return false;
								    		        }
								    		        obj.notice = 1;
								    		        remindTime = remindTime + ":00";//兼容后台Timestamp
								    		        obj.remindTime = $.fullCalendar.parseDate(remindTime,"yyyy-mm-dd HH:mm:ss");
							    		     	}else {
							    		        	obj.notice = 0;
							    		        	obj.remindTime = null;
						    		          	}	    	
							    		    
							    		     $.post("schedule/addEvents_do.action",
							    		    	{//把刚输入的日程计划信息传到后台，保存到数据库     
						                     	'schedule.title': obj.title,     
						                        'schedule.start':start,     
						                        'schedule.end':end,
						                        'schedule.description':obj.description,	                       
						                        'schedule.remindTime':remindTime,
						                        'schedule.color':obj.color,
						                        'schedule.notice':obj.notice
						                        },
						                        function (data, textStatus){
													obj.id = data[0].id;
													$('#calendar').fullCalendar('renderEvent', obj);  //核心的更新代码
									    		    $('#calendar').fullCalendar('unselect');
									    		    postsuc('日程已添加至后台！');			
						                        }, "json"
						                      );		    		    						    		    				    		  
								    		  return true;		    		        	
							    		   },
							    		    cancel: true
							    		});	
						    	},
						    	//更新和删除日程
						    	eventClick:function(calEvent, jsEvent, view){	  
							    	art.dialog.open('scheduleform.html', {
						    		    title: '更新日程',
						    		    lock: true,
						    		    drag:false,
						    		    width:300,
						                height:400,
						    		    //background: '#600', // 背景色
						    		    opacity: 0.6,	// 透明度
						    		    // 在open()方法中，init会等待iframe加载完毕后执行
						    		    init: function () {
						    		      	var iframe = this.iframe.contentWindow;
						    		    	//var top = art.dialog.top;// 引用顶层页面window对象
						    		    	iframe.document.getElementById('start').value = $.fullCalendar.formatDate(calEvent.start,"yyyy-MM-dd");		    		
						    		    	iframe.document.getElementById('end').value = $.fullCalendar.formatDate(calEvent.end,"yyyy-MM-dd");
						    		    	iframe.document.getElementById('description').value = calEvent.description;
						    		    	iframe.document.getElementById('title').value = calEvent.title;
						    		    	if(calEvent.notice == 1) {
						    		    		iframe.document.getElementById('notice').checked = true;	    		    		
						    		    		iframe.document.getElementById('remindTime').value = $.fullCalendar.formatDate(calEvent.remindTime,"yyyy-MM-dd HH:mm");
						    		    		iframe.document.getElementById('showtxt').style.display='block';
						    		    	}else {	    		    		
						    		    	}
						    		    	iframe.document.getElementById('color').value = calEvent.color;	    		    	
						    		    },
						    		    okVal:'修改日程',
						    		    ok: function () {
						    		    	var iframe = this.iframe.contentWindow;
						    		    	if (!iframe.document.body) {
						    		        	waring('iframe还没加载完毕呢');
						    		        	return false;
						    		        };
						    		        
						    		        var start = iframe.document.getElementById('start').value;
							    		    var end = iframe.document.getElementById('end').value;
							    		    var remindTime = iframe.document.getElementById('remindTime').value;
							    		    calEvent.title = iframe.document.getElementById('title').value;
							    		    calEvent.description = iframe.document.getElementById('description').value;
							    		    calEvent.start = $.fullCalendar.parseDate(start);
							    		    calEvent.end = $.fullCalendar.parseDate(end);		    		    		    
							    		    calEvent.color = iframe.document.getElementById('color').value;
							    		    if (calEvent.title== '') {
							    		    	waring("标题不能为空");
							    		        return false;
							    		     }else if(start== '') {
							    		    	 waring("开始日期不能为空");
							    		        return false;
							    		     }else if(end == '') {
							    		    	 waring("结束日期不能为空");
							    		        return false;
							    		     }else if(iframe.document.getElementById('notice').checked) {			    		 
								    		        if(remindTime == '') {
								    		        	waring("短信提醒时间不能为空");
								    		        	return false;
								    		        }
								    		        calEvent.notice = 1;
								    		        remindTime = remindTime + ":00";//兼容后台Timestamp
								    		        calEvent.remindTime = $.fullCalendar.parseDate(remindTime,"yyyy-mm-dd HH:mm:ss");
							    		     	}else {
							    		        	calEvent.notice = 0;
							    		        	calEvent.remindTime = null;
						    		          	}	    			      
						    		        $.post("schedule/updateEvents_do.action",{//把要更新的日程计划信息传到后台，保存到数据库
						    		        	'schedule.id':calEvent.id,
						    		        	'schedule.title': calEvent.title,     
						                        'schedule.start':start,     
						                        'schedule.end':end,
						                        'schedule.description':calEvent.description,	                       
						                        'schedule.remindTime':remindTime,
						                        'schedule.color':calEvent.color,
						                        'schedule.notice':calEvent.notice
						                        }, function (data, textStatus){
						                        	$('#calendar').fullCalendar('updateEvent', calEvent);
								    		        //弹出提示
								    		        postsuc('日程已更新至后台！');		
						                        }, "json"	             	    		        
						                    ); 	 					   
							    		    return true;				        	
						    		    },
						    		    cancel: true,
						    		  //删除日程，保存到数据库
						    		    button: [{
						    		    	name: '删除日程',
						    		        callback: function () {
						    		        	art.dialog.confirm('你确定要删除日程吗？', function () {
						    		        		 $.post("schedule/deleteEvents_do.action",{
											    		 	id:calEvent.id
									                     },function (data, textStatus){
									                    	 $('#calendar').fullCalendar('removeEvents',calEvent.id);
										    		         postsuc('日程已删除！');	
									                        }, "json"							    		         
									    		        );  	
						    		        	}, function () {						    		        	   
						    		        	});							    		        						    		  					    		        							    		       
												return true;
						    		         }	    	
						    		         }]
						    		   });
							    	},
							    	//鼠标滑过 显示详情
							    	 eventMouseover: function(event, jsEvent, view){ 	        	
								       		showDetail(event, jsEvent);	        		
									},
										eventMouseout: function(event, jsEvent, view){
											$('#tip').remove();
									},
						});
	});
	function showDetail(obj, e){
		var str;
		if(obj.notice == 1)  str = "短信提醒时间："+$.fullCalendar.formatDate(obj.remindTime,"yyyy-MM-dd HH:mm");
		else {str = "短信提醒未启动";}
		var eInfo = '<div id="tip"><ul>';
		eInfo += '<li class="clock">' + '开始：'+$.fullCalendar.formatDate(obj.start,"yyyy-MM-dd") +'</br>结束：'+$.fullCalendar.formatDate(obj.end,"yyyy-MM-dd")+ '</li>';
		eInfo += '<li class="message">' +'日志：'+ obj.description + '<br/>&nbsp</li>';
		//eInfo += '<li>分类：' + obj.title + '</li>';
		eInfo += '<li class="postmessage">' + str + '<br/>&nbsp</li>';
		eInfo += '</ul></div>';
		$(eInfo).appendTo($('body'));
		$('#tip').css({"display":"none", "left":(e.pageX + 20) + "px", "top":(e.pageY + 10) + "px"}).fadeTo(600, 0.9);
		//鼠标移动效果
		$('.fc-event-inner').mousemove(function(e){
			$('#tip').css({'top': (e.pageY + 10), 'left': (e.pageX + 20)});
		});
	}	
	//警告窗口
	function waring(mes) {
		art.dialog({
			fixed: true,
		    lock: true,
		    drag:false,
		    icon: 'warning',
		    content: mes
		});
	}
	//右下角温馨提示窗口
	function postsuc(mes) {
		artDialog.notice = function (options) {
		    var opt = options || {},
		        api, aConfig, hide, wrap, top,
		        duration = 800;
		        
		    var config = {
		        id: 'Notice',
		        left: '100%',
		        top: '100%',
		        fixed: true,
		        drag: false,
		        resize: false,
		        follow: null,
		        lock: false,
		        init: function(here){
		            api = this;
		            aConfig = api.config;
		            wrap = api.DOM.wrap;
		            top = parseInt(wrap[0].style.top);
		            hide = top + wrap[0].offsetHeight;
		            
		            wrap.css('top', hide + 'px')
		                .animate({top: top + 'px'}, duration, function () {
		                    opt.init && opt.init.call(api, here);
		                });
		        },
		        close: function(here){
		            wrap.animate({top: hide + 'px'}, duration, function () {
		                opt.close && opt.close.call(this, here);
		                aConfig.close = $.noop;
		                api.close();
		            });
		            
		            return false;
		        }
		    };	
		    
		    for (var i in opt) {
		        if (config[i] === undefined) config[i] = opt[i];
		    };
		    
		    return artDialog(config);
		};
    	art.dialog.notice({
            title: '笔记之家',
            width: 150,// 必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能导致artDialog收缩
            content: mes,
            icon: 'face-smile',
            time: 3
        });
	}
</script>
</html>